@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加来料检验单</title>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #fff;
            font-family: 'Microsoft YaHei', sans-serif;
            font-size: 14px;
        }
        .form-container {
            padding: 20px;
        }
        .form-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e6e6e6;
        }
        .form-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }
        .close-btn {
            width: 24px;
            height: 24px;
            line-height: 22px;
            text-align: center;
            background: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 2px;
            cursor: pointer;
            color: #666;
        }
        .close-btn:hover {
            background: #e6e6e6;
        }
        .section-title {
            font-size: 14px;
            color: #666;
            margin: 20px 0 15px 0;
            padding-left: 10px;
            border-left: 3px solid #1890ff;
            background: #f8f9fa;
            padding: 8px 0 8px 10px;
            margin-left: -20px;
            margin-right: -20px;
            padding-left: 30px;
        }
        .layui-form-item {
            margin-bottom: 18px;
        }
        .layui-form-label {
            width: 100px;
            padding: 9px 15px 9px 0;
            text-align: right;
            font-size: 14px;
        }
        .layui-input-block {
            margin-left: 110px;
        }
        .required {
            color: #ff5722;
            margin-right: 2px;
        }
        .auto-generate {
            display: flex;
            align-items: center;
        }
        .auto-generate .layui-input {
            flex: 1;
            margin-right: 10px;
        }
        .quantity-controls {
            display: flex;
            align-items: center;
        }
        .quantity-controls .layui-input {
            width: 80px;
            text-align: center;
        }
        .quantity-btn {
            width: 30px;
            height: 30px;
            line-height: 28px;
            text-align: center;
            border: 1px solid #ddd;
            background: #fff;
            cursor: pointer;
            color: #666;
            font-size: 18px;
            user-select: none;
        }
        .quantity-btn:hover {
            background: #f5f5f5;
            border-color: #1890ff;
            color: #1890ff;
        }
        .quantity-btn.decrease {
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
            border-right: none;
        }
        .quantity-btn.increase {
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
            border-left: none;
        }
        .form-buttons {
            text-align: center;
            padding: 30px 0 20px 0;
            border-top: 1px solid #e6e6e6;
            margin-top: 30px;
        }
        .layui-btn {
            padding: 0 25px;
            height: 38px;
            line-height: 38px;
        }
        .expand-section {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .expand-icon {
            transition: transform 0.3s;
        }
        .expand-icon.expanded {
            transform: rotate(90deg);
        }
        .collapsible-content {
            display: none;
        }
        .collapsible-content.expanded {
            display: block;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <div class="form-header">
            <div class="form-title">添加来料检验单</div>
            <div class="close-btn" id="closeBtn">×</div>
        </div>
        
        <form class="layui-form" id="inspectionForm" lay-filter="inspectionForm">
            <input type="hidden" name="id" id="recordId">
            
            <!-- 基本信息 -->
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required">*</span>检验单编号</label>
                        <div class="layui-input-block">
                            <div class="auto-generate">
                                <input type="text" name="incomingInspectionCode" lay-verify="required" placeholder="请输入来料检验单编号" class="layui-input">
                                <input type="checkbox" name="autoGenerate" title="自动生成" lay-skin="switch" lay-text="自动生成|手动输入" lay-filter="autoGenerate">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required">*</span>检验单名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="incomingInspectionName" lay-verify="required" placeholder="请输入内容" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 物料与供应商 -->
            <div class="section-title">物料与供应商</div>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required">*</span>产品物料编码</label>
                        <div class="layui-input-block">
                            <div style="display: flex; align-items: center;">
                                <input type="text" name="productCode" lay-verify="required" placeholder="请选择物料" class="layui-input" style="flex: 1; margin-right: 5px;">
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" style="width: 30px; padding: 0;">
                                    <i class="layui-icon layui-icon-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">产品物料名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="productName" class="layui-input" placeholder="请输入产品物料名称">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">单位</label>
                        <div class="layui-input-block">
                            <input type="text" name="unit" class="layui-input" placeholder="请输入单位">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required">*</span>供应商编码</label>
                        <div class="layui-input-block">
                            <div style="display: flex; align-items: center;">
                                <input type="text" name="supplierCode" lay-verify="required" placeholder="请选择供应商" class="layui-input" style="flex: 1; margin-right: 5px;">
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" style="width: 30px; padding: 0;">
                                    <i class="layui-icon layui-icon-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">供应商简称</label>
                        <div class="layui-input-block">
                            <input type="text" name="incomingInspectionJName" class="layui-input" placeholder="请输入供应商简称">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">供应商批次号</label>
                        <div class="layui-input-block">
                            <input type="text" name="batch" placeholder="请输入供应商批次号" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 检测情况 -->
            <div class="section-title">检测情况</div>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required">*</span>本次接收数量</label>
                        <div class="layui-input-block">
                            <div class="quantity-controls">
                                <div class="quantity-btn decrease" onclick="adjustQuantity('receiveNum', -1)">-</div>
                                <input type="number" name="receiveNum" value="1" min="0" class="layui-input">
                                <div class="quantity-btn increase" onclick="adjustQuantity('receiveNum', 1)">+</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required">*</span>本次检测数量</label>
                        <div class="layui-input-block">
                            <input type="number" name="testingNum" placeholder="请输入本次检测数量" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">不合格数量</label>
                        <div class="layui-input-block">
                            <div class="quantity-controls">
                                <div class="quantity-btn decrease" onclick="adjustQuantity('unqualifiedNum', -1)">-</div>
                                <input type="number" name="unqualifiedNum" value="0" min="0" class="layui-input">
                                <div class="quantity-btn increase" onclick="adjustQuantity('unqualifiedNum', 1)">+</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required">*</span>来料日期</label>
                        <div class="layui-input-block">
                            <input type="text" name="incomingDate" lay-verify="required" placeholder="请选择来料日期" class="layui-input" id="incomingDate">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required">*</span>检测日期</label>
                        <div class="layui-input-block">
                            <input type="text" name="testingDate" lay-verify="required" placeholder="请选择检测日期" class="layui-input" id="testingDate">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">检测结果</label>
                        <div class="layui-input-block">
                            <select name="testingResult">
                                <option value="">请选择检测结果</option>
                                <option value="检验通过">检验通过</option>
                                <option value="检验不通过">检验不通过</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required">*</span>检测人员</label>
                        <div class="layui-input-block">
                            <input type="text" name="testingPerson" lay-verify="required" placeholder="请输入检测人员" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="remark" placeholder="请输入内容" class="layui-textarea" rows="3"></textarea>
                </div>
            </div>
            
            <!-- 结果统计 -->
            <div class="section-title expand-section" onclick="toggleSection(this)">
                <span>结果统计</span>
                <span class="expand-icon">▶</span>
            </div>
            <div class="collapsible-content">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">单据状态</label>
                            <div class="layui-input-block">
                                <input type="radio" name="state" value="0" title="草稿" checked>
                                <input type="radio" name="state" value="1" title="已确认">
                                <input type="radio" name="state" value="2" title="已完成">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="form-buttons">
                <button class="layui-btn" lay-submit lay-filter="saveBtn">保存</button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">取消</button>
            </div>
        </form>
    </div>

    <script>
        layui.use(['form', 'laydate', 'layer'], function() {
            var form = layui.form;
            var laydate = layui.laydate;
            var layer = layui.layer;
            
            // 获取URL参数
            var urlParams = new URLSearchParams(window.location.search);
            var action = urlParams.get('action');
            var id = urlParams.get('id');
            
            // 更新标题
            if (action === 'edit') {
                document.querySelector('.form-title').textContent = '修改来料检验单';
            }
            
            // 日期选择器
            laydate.render({
                elem: '#incomingDate',
                type: 'date'
            });
            
            laydate.render({
                elem: '#testingDate',
                type: 'date'
            });
            
            // 自动生成编号
            form.on('switch(autoGenerate)', function(data) {
                console.log('开关状态改变:', data.elem.checked);
                var codeInput = $('input[name="incomingInspectionCode"]');
                if (data.elem.checked) {
                    // 调用后端生成编号接口
                    generateIncomingInspectionCode();
                } else {
                    codeInput.val('');
                }
            });
            
            // 生成来料检验单编号
            function generateIncomingInspectionCode() {
                console.log('开始生成编号...');
                layer.load(2);
                $.ajax({
                    url: '/IncomingInspection/GenerateCode',
                    type: 'POST',
                    data: { prefix: 'LL' },
                    success: function(res) {
                        layer.closeAll('loading');
                        console.log('生成编号响应:', res);
                        if (res.success && res.data) {
                            $('input[name="incomingInspectionCode"]').val(res.data);
                            layer.msg('编号生成成功', {icon: 1, time: 1000});
                        } else {
                            layer.msg(res.message || '生成编号失败', {icon: 2});
                        }
                    },
                    error: function(xhr, status, error) {
                        layer.closeAll('loading');
                        console.error('生成编号失败:', xhr, status, error);
                        layer.msg('生成编号失败: ' + error, {icon: 2});
                    }
                });
            }
            
            // 如果是编辑模式，加载数据
            if (action === 'edit' && id) {
                loadFormData(id);
            }
            
            // 加载表单数据
            function loadFormData(recordId) {
                $.ajax({
                    url: '/IncomingInspection/GetById',
                    type: 'GET',
                    data: { id: recordId },
                    success: function(res) {
                        if (res.success && res.data) {
                            var data = res.data;
                            
                            // 填充表单数据
                            form.val('inspectionForm', {
                                id: data.id,
                                incomingInspectionCode: data.incomingInspectionCode,
                                incomingInspectionName: data.incomingInspectionName,
                                incomingInspectionJName: data.incomingInspectionJName,
                                batch: data.batch,
                                productCode: data.productCode,
                                productName: data.productName,
                                receiveNum: data.receiveNum,
                                testingNum: data.testingNum,
                                unqualifiedNum: data.unqualifiedNum,
                                testingResult: data.testingResult,
                                testingPerson: data.testingPerson,
                                incomingDate: formatDate(data.incomingDate),
                                testingDate: formatDate(data.testingDate),
                                state: data.state
                            });
                        } else {
                            layer.msg(res.message || '获取数据失败', {icon: 2});
                        }
                    },
                    error: function() {
                        layer.msg('获取数据失败', {icon: 2});
                    }
                });
            }
            
            // 格式化日期
            function formatDate(dateStr) {
                if (!dateStr) return '';
                var date = new Date(dateStr);
                return date.getFullYear() + '-' + 
                       String(date.getMonth() + 1).padStart(2, '0') + '-' + 
                       String(date.getDate()).padStart(2, '0');
            }
            
            // 表单提交
            form.on('submit(saveBtn)', function(data) {
                var formData = data.field;
                var url = action === 'edit' ? '/IncomingInspection/Update' : '/IncomingInspection/Create';
                
                // 数据验证
                if (!formData.incomingInspectionCode) {
                    layer.msg('请输入来料检验单编号', {icon: 2});
                    return false;
                }
                if (!formData.incomingInspectionName) {
                    layer.msg('请输入来料检验单名称', {icon: 2});
                    return false;
                }
                if (!formData.productCode) {
                    layer.msg('请输入产品物料编码', {icon: 2});
                    return false;
                }
                if (!formData.testingPerson) {
                    layer.msg('请输入检测人员', {icon: 2});
                    return false;
                }
                
                // 数据类型转换
                formData.receiveNum = parseInt(formData.receiveNum) || 0;
                formData.testingNum = parseInt(formData.testingNum) || 0;
                formData.unqualifiedNum = parseInt(formData.unqualifiedNum) || 0;
                formData.state = parseInt(formData.state) || 0;
                
                // 日期格式转换为ISO格式
                if (formData.incomingDate) {
                    formData.incomingDate = new Date(formData.incomingDate).toISOString();
                }
                if (formData.testingDate) {
                    formData.testingDate = new Date(formData.testingDate).toISOString();
                }
                
                // 设置默认值
                if (!formData.batch) formData.batch = '';
                if (!formData.productName) formData.productName = '';
                if (!formData.testingResult) formData.testingResult = '';
                if (!formData.incomingInspectionJName) formData.incomingInspectionJName = '';
                
                console.log('提交数据:', formData);
                
                $.ajax({
                    url: url,
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    beforeSend: function() {
                        layer.load(1);
                    },
                    success: function(res) {
                        layer.closeAll('loading');
                        console.log('提交响应:', res);
                        if (res.success) {
                            layer.msg(action === 'edit' ? '修改成功' : '新增成功', {icon: 1}, function() {
                                // 关闭当前窗口
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg(res.message || (action === 'edit' ? '修改失败' : '新增失败'), {icon: 2});
                        }
                    },
                    error: function(xhr, status, error) {
                        layer.closeAll('loading');
                        console.error('提交失败:', xhr, status, error);
                        layer.msg(action === 'edit' ? '修改失败' : '新增失败', {icon: 2});
                    }
                });
                return false;
            });
            
            // 取消按钮和关闭按钮
            $('#cancelBtn, #closeBtn').click(function() {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            });
        });
        
        // 数量调节函数
        function adjustQuantity(fieldName, delta) {
            var input = $('input[name="' + fieldName + '"]');
            var currentValue = parseInt(input.val()) || 0;
            var newValue = Math.max(0, currentValue + delta);
            input.val(newValue);
        }
        
        // 切换展开/收起
        function toggleSection(element) {
            var content = element.nextElementSibling;
            var icon = element.querySelector('.expand-icon');
            
            if (content.classList.contains('expanded')) {
                content.classList.remove('expanded');
                icon.classList.remove('expanded');
                icon.textContent = '▶';
            } else {
                content.classList.add('expanded');
                icon.classList.add('expanded');
                icon.textContent = '▼';
            }
        }
    </script>
</body>
</html> 